<template>
    <div style="margin-left:25px;margin-top: 15px;">
        <table style="width: 90%;">
            <tbody>
                <tr>
                    <td>
                        <el-card style="width: 780px;height: 300px">
                            <template #header>
                                <div class="card-header">
                                    <span style="font-weight: 900;font-size: 15pt;">生产提示</span>
                                </div>
                            </template>
                            <h1>啊啊啊</h1>
                        </el-card>
                    </td>
                    <td>
                        <el-card style="width: 780px;height: 300px">
                            <template #header>
                                <div class="card-header">
                                    <span style="font-weight: 900;font-size: 15pt;">种母存栏变动</span>
                                </div>
                            </template>
                            <h1>啊啊啊</h1>
                        </el-card>
                    </td>
                </tr>
                <br>
                <tr>
                    <td>
                        <el-card style="width: 780px;height: 300px">
                            <template #header>
                                <div class="card-header">
                                    <span style="font-weight: 900;font-size: 15pt;">羊场实时存栏</span>
                                </div>
                            </template>
                            <div style="height: 100px;text-align: center;font-size: 17pt;">
                                <h4 style="margin-bottom: 10px;">羊场总存栏</h4>
                                <span><span style="color: #02a7f0;font-size: 23pt;font-weight: 700;">{{
                                    (realtimeCount.breedinghenCount +
                                        realtimeCount.descendentCount + realtimeCount.seedmaleCount)
                                        }}</span> 只</span>
                            </div>
                            <template #footer>
                                <el-row :gutter="21" style="margin: auto;margin-left: 80px;font-size: 12pt">
                                    <el-col :span="7" :offset="0" style="text-align: center;">
                                        <p style="color: #02a7f0;font-size: 19pt;font-weight: 400;margin-bottom: 10px;">
                                            {{ realtimeCount.breedinghenCount }}</p>
                                        <p>种母存栏</p>
                                    </el-col>
                                    <el-col :span="7" :offset="0" style="text-align: center;">
                                        <p style="color: #02a7f0;font-size: 19pt;font-weight: 400;margin-bottom: 10px;">
                                            {{ realtimeCount.descendentCount }}</p>
                                        <p>后裔存栏</p>
                                    </el-col>
                                    <el-col :span="7" :offset="0" style="text-align: center;">
                                        <p style="color: #02a7f0;font-size: 19pt;font-weight: 400;margin-bottom: 10px;">
                                            {{ realtimeCount.seedmaleCount }}</p>
                                        <p>种公存栏</p>
                                    </el-col>
                                </el-row>

                            </template>
                        </el-card>
                    </td>
                    <td>
                        <el-card style="width: 780px;height: 300px">
                            <template #header>
                                <div class="card-header">
                                    <span style="font-weight: 900;font-size: 15pt;">近30日存栏趋势</span>
                                </div>
                            </template>
                            <h1>啊啊啊</h1>
                        </el-card>
                    </td>
                </tr>
                <br>
                <tr>
                    <td>
                        <el-card style="width: 780px;height: 300px">
                            <template #header>
                                <div class="card-header">
                                    <span style="font-weight: 900;font-size: 15pt;">种母存栏结构</span>
                                </div>
                            </template>
                            <h1>啊啊啊</h1>
                        </el-card>
                    </td>
                    <td>
                        <el-card style="width: 780px;height: 300px">
                            <template #header>
                                <div class="card-header">
                                    <span style="font-weight: 900;font-size: 15pt;">近30日死淘趋势</span>
                                </div>
                            </template>
                            <h1>啊啊啊</h1>
                        </el-card>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- <VueEcharts></VueEcharts> -->
    </div>
</template>


<script lang="ts" setup>
import { ref, reactive, inject, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import http from "@/http";
// import VueEcharts from "vue-echarts";



//羊只实时存栏数量
const realtimeCount = ref({
    breedinghenCount: 0,
    descendentCount: 0,
    seedmaleCount: 0
})
const GetrealtimeCount = () => {
    http.get("RouteRead/api/SheepCounts/GetRealtimeCount").then(x => {
        realtimeCount.value = x.data;
        console.log(x.data)
    })
}

const HerdstrendList = ref([]);
const GetHerdstrend = () => {
    http.get("RouteRead/api/SheepCounts/GetHerdstrend").then(x => {
        HerdstrendList.value = x.data;
        console.log(HerdstrendList.value)
    })
}

onMounted(() => {
    GetrealtimeCount();
    GetHerdstrend();
})
</script>


<style></style>